import React,{useState,useEffect} from 'react';
//ant
import {GithubOutlined,WeiboCircleOutlined,WechatOutlined} from '@ant-design/icons';
// dayjs
import dayjs from 'dayjs';

const Page: React.FC = () => {    
    const [date, setDate] = useState() as any; 
         
    useEffect(()=>{
        let timeNow:any=dayjs().format('YYYY-MM-DD hh:mm:ss');
        let time=setInterval(()=>{
            timeNow=dayjs(timeNow).add(1000, 'millisecond');          
            setDate(dayjs(timeNow.$d).format('YYYY-MM-DD hh:mm:ss'));
            return ()=>{
                clearInterval(time);
            }        
        },1000)
    },[]);
  
    return (
        <>
            <div className='list'>
                <div className='item'>{date}</div> 
                <div className='item icon'>
                    <a target="_blank" href='https://gitee.com/tianjixian01/epidemic-map'><GithubOutlined /></a>
                </div>
                <div className='item icon'><a target="_blank" href='#'><WeiboCircleOutlined /></a></div> 
                <div className='item icon'><a target="_blank" href='#'><WechatOutlined /></a></div>          
                <div className='item txt'><span>(版本号：V0.0.1 作者：skyline)</span></div>                
            </div>

           {/* setyle*/}
            <style jsx>{`
                .list{
                    font-size:18px;
                    display:flex;
                    color:#1890ff;
                    .item{
                        margin:0 5px;
                    }
                    .icon{
                        font-size:20px;
                    }
                    .txt{                
                        font-size:14px;
                    }   
                }
            `}</style>
        </>                
    );
};

export default Page;